<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <!-- <button @click="obj = { name:'andy', age: 99 }">修改obj的指向</button> -->
        <button @click="obj.name='rose'">修改name</button>
        <button @click="obj.age=32">修改age</button>
        <button @click="obj.pet.nickname='小强'">修改nickname</button>
        <p>{{obj.name}} --- {{obj.age}} --- {{ obj.height }} --- {{ obj.pet.nickname }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    name: 'jack',
                    age: 16,
                    height: 175,
                    pet: {
                        nickname: '旺财'
                    }
                }
            },
            watch: {

                // obj () {
                //     console.log('obj变化了')
                // },
                // // 我就是想侦听到对象里属性的变化
                // // 侦听obj里name的变化，但是要记得加引号
                // // 可是这样写只能侦听一个属性
                // "obj.name" () {
                //     console.log('name变化了')
                // },

                // 如果希望侦听到所有属性的变化，就要开启深度侦听
                obj: {
                    // 当有变化会调用的函数
                    handler () {
                        console.log('obj的属性变化了')
                    },
                    // 开启深度侦听
                    deep: true,
                    // 要不要当前页面一打开就立即调用依次handler函数
                    // 给true要立即调用，默认是false（代表只有改动了才调用）
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>